<!DOCTYPE html>
<html lang="en" id="html">
<head>
  <meta charset="UTF-8">
  <!-- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,initial-scale=1.0"/> -->
  <meta id="vp" name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
  <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
  <!-- <script type="text/javascript">
    // var rem = document.documentElement.clientWidth/6.4;
    // $('html').css('fontSize',rem + 'px');
    var html = document.getElementById('html');
    html.style.fontSize = html.offsetWidth/640*100 +'px';
    html.addEventListener('resize',function(){
      html.style.fontSize = html.offsetWidth/640*100 +'px';
    }); -->
    <script type="text/javascript">
  		var rem = document.documentElement.clientWidth/6.4;
  		document.getElementsByTagName("html")[0].style.fontSize = rem+"px";
  	</script>
  </script>
  <link rel="stylesheet" href="css/style.css" media="screen" title="no title">
  <link rel="stylesheet" href="font/iconfont.css" media="screen" title="no title">
  <title>音乐播放</title>

</head>
<body>
  <div id="wrapper">
    <header class="header">
      <div class="up">
        <span class="hLeft iconfont">&#xe601;</span>
        <span class="hCenter">青春修炼手册</span>
        <span class="hRight iconfont">&#xe600;</span>
      </div>
      <div class="down">
        -- TFBOYS --
      </div>
    </header>
    <section class="container">
      <nav class="nav">
        <span>标准</span>
        <span>独家</span>
        <span>MV</span>
        <span>dts</span>
      </nav>
      <div class="picShow">
        <img src="img/pic.jpg" alt="音乐" />
      </div>
      <div class="lyric">
        曲：刘佳
      </div>
      <div class="musicPlay">
        <audio src="audio/TFBOYS - 大梦想家.mp3" class="music" id="music"></audio>
        <div class="progress">
          <div class="startTime" id="startTime">00：00</div>
          <div class="progressBar">
            <div id="ball"></div>
            <div id="playedO"></div>
            <div id="playedT"></div>
          </div>
          <div class="endTime" id="endTime">00：00</div>
        </div>

        <div class="select">
          <span id="prev" class="iconfont">&#xe60a;</span>
          <span id="playORpause" class="iconfont">&#xe60b;</span>
          <span id="next" class="iconfont">&#xe60c;</span>
        </div>
      </div>
      <div class="playSelect">
          <div class="iconfont">&#xe609;</div>
          <div class="iconfont">&#xe606;</div>
          <div class="iconfont">&#xe605;</div>
          <div class="iconfont">&#xe602;</div>
          <div class="iconfont">&#xe607;</div>
      </div>
    </section>

  </div>
</body>
<script src="js/playAudio.js"></script>
</html>
